<template>
    <dl :class="{'active':activeInd === ind}"  @click="choose()"> 
        <dt v-if="icon">
            <img :src="icon" alt="">
        </dt>
        <dd>
            {{label}}
        </dd>
    </dl>
</template>
<script>
export default {
    props:['icon','label','type','subject','ind','activeInd'],
    methods:{
        choose(){
            this.$emit('active',this.ind);
            this.$bus.$emit('choose',this.subject,this.type)
        }
    }
}
</script>
<style lang="scss">
    dl{
        width:25%;
        img{
            width:80px;
            height:80px;
        }
        text-align: center;
        font-size:12px;
        &.border{
            border:1px solid gray;
            display: flex;
            dt{
                img{
                    width:30px;
                    height:30px;
                }
            }
        }
        &.active{
            border:1px solid red;
        }
    }
    
</style>

